<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <!-- 在style.css里设计index.html的样式需要下面的一段代码，才能使用 -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 头部部分 -->
    <div class="header w">
        <!-- logo 部分 -->
        <div class="logo">
            <img src="images/logo_03.jpg" alt="">
        </div>
        <!-- 导航栏部分 nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块 search -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <div class="pic"><img src="images/图片1.png" alt="" height="42px"></div>
            <div class="name">EDTA-123</div>
        </div>
    </div>
    <!-- banner部分 -->
    <div class="banner">
        <div class="w">
            <!-- 左侧边栏部分 -->
            <div class="left">
                <ul class="ltlt">
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">后端开发<span>&gt;</span></a></li>
                    <li><a href="#">移动开发<span>&gt;</span></a></li>
                    <li><a href="#">人工智能<span>&gt;</span></a></li>
                    <li><a href="#">商业预测<span>&gt;</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                    <li><a href="#">运维&从测试<span>&gt;</span></a></li>
                    <li><a href="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品<span>&gt;</span></a></li>
                </ul>
            </div>
            <!-- 右课程表部分 -->
            <div class="right">
                <div class="head">
                    我的课程表
                </div>
                <div class="box1">
                    <a href="#">
                        <p class="one">继续学习&nbsp;&nbsp;程序语言设计</p>
                        <p class="two">正在学习-使用对象</p>
                    </a>

                </div>
                <div class="box2">
                    <a href="#">
                        <p class="one">继续学习&nbsp;&nbsp;程序语言设计</p>
                        <p class="two">正在学习-使用对象</p>
                    </a>
                </div>
                <div class="box3">
                    <a href="#">
                        <p class="one">继续学习&nbsp;&nbsp;程序语言设计</p>
                        <p class="two">正在学习-使用对象</p>
                    </a>
                </div>
                <div class="end"><a href="#">全部课程</a></div>
            </div>
        </div>

    </div>
    <!-- 尾部部分 -->
    <div class="btm w">
        <div class="lt1">
            <div class="box1">精品推荐</div>
            <div class="box">JQuery</div>
            <div class="box">Spark</div>
            <div class="box">MySQL</div>
            <div class="box">JavaWeb</div>
            <div class="box">MySQL</div>
            <div class="box">JavaWeb</div>
        </div>
        <div class="rt1"><a href="#">修改兴趣</a></div>
    </div>
</body>

</html>